<!--
 * @Author: gao_m3
 * @Date: 2021-09-10 14:49:59
 * @LastEditors: chen_yt
 * @LastEditTime: 2022-09-19 14:39:46
 * @Descripttion: 
-->
<template>
  <div class="micro-front-desc-container">
    <div class="register-new-app">
      <fks-form label-position="left" label-width="130px" :model="extraSubapp">
        <fks-form-item :label="LANG.APPLYNAME">
          <fks-input v-model="extraSubapp.name" />
        </fks-form-item>
        <fks-form-item :label="LANG.RUN_ADDRESS">
          <fks-input v-model="extraSubapp.entry" />
        </fks-form-item>
      </fks-form>

      <fks-button @click="clearCache">
        {{ LANG.CLEAR_CACHE }}
      </fks-button>

      <fks-button @click="loadStorage">
        {{ LANG.SYNC_CLIENT_CACHE }}
      </fks-button>

      <fks-button primary @click="submit">
        {{ LANG.REGISTER_SUB_APPLY }}
      </fks-button>
    </div>

    <div class="micro-front-app-list">
      <div class="table-content">
        <fks-query-page
          v-loading="tableLoading"
          :data="tableData"
          :page="false"
          :element-loading-text="LANG.LOADING"
          :table-name="LANG.SUB_APPLY_LIST"
        >
          <template>
            <fks-table-column type="index" align="center" label="#">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </fks-table-column>
            <fks-table-column
              prop="name"
              align="left"
              :label="LANG.ACTUAL_NAME"
            >
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </fks-table-column>
            <fks-table-column
              prop="entry"
              align="left"
              :label="LANG.RUN_ADDRESS"
            />
            <fks-table-column
              align="left"
              prop="activeRoute"
              :label="LANG.ACTIVE_ROUTE"
            />
          </template>
        </fks-query-page>
      </div>
    </div>
  </div>
</template>


<script>
// import Mix from '@/mixins/module'
import { registerExtraApp, getSubAppList } from '@/microapp/qiankun'
export default {
  name: 'MFE',
  // mixins: [Mix],
  data() {
    return {
      tableLoading: false,
      extraSubapp: {},
      storageName: 'extra_subapps'
    }
  },
  computed: {
    tableData() {
      return getSubAppList()
    }
  },
  mounted() {},
  methods: {
    submit() {
      let app = { ...this.extraSubapp }
      this.register(app)
    },
    clearCache() {
      this.$storage.remove(`${this.storageName}`)
    },
    register(app = {}) {
      let result = registerExtraApp(app)

      if (!result) {
        this.$message({
          type: 'error',
          message: this.LANG.REGISTER_ERROR
        })
        return
      }

      this.$message({
        type: 'success',
        message: this.LANG.REGISTER_SUCCESS
      })

      let appList = this.getStorage()
      appList = appList.filter((item) => item.name != app.name)
      appList.push(app)
      console.log(appList)

      this.$storage.set(`${this.storageName}`, JSON.stringify(appList))
    },
    loadStorage() {
      let appList = this.getStorage()
      for (let app of appList) {
        this.register(app)
      }
    },
    getStorage() {
      let appList = this.$storage.getObject(`${this.storageName}`)
      if (!Array.isArray(appList)) {
        appList = []
      }
      return appList
    }
  }
}
</script>
<style lang="scss" scoped>
.micro-front-desc-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 24px 32px;
  background-color: white !important;
  display: flex;
  flex-direction: column;
}

.register-new-app {
  position: relative;
  width: 600px;
  text-align: right;
  flex-grow: 0;
}
.micro-front-app-list {
  flex-grow: 1;
  position: relative;
  .table-content {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  ::v-deep .fks-query-page {
    padding: 0;
  }
}
</style>
